<template>
    <header>
        <p>我的订单</p>
    </header>
  <!-- 订单列表部分 -->
    <h3>未支付订单信息：</h3>
    <template v-for="order in ordersList_unpay">
        <OrderItem :isNeedPaied="true" :isPaymentPage="false" :orderInfo="order"/>
    </template>


    <h3>已支付订单信息：</h3>
    <template v-for="order in orderList_pay">
        <OrderItem  :isNeedPaied="false" :isPaymentPage="false" :orderInfo="order"/>
    </template>
  <MyFooter/>
</template>

<script setup>
import MyFooter from "../components/Footer.vue";
import OrderItem from "../components/OrderItem.vue";
import {listOrdersByUserIdAPI} from "../api/api.js";
import {onMounted, reactive} from "vue";
import {getSessionStorage} from "../common.js";
const ordersList_unpay = reactive([])
const orderList_pay = reactive([])
onMounted(async ()=>{
    await listOrdersByUserIdAPI(getSessionStorage("user").token,getSessionStorage("user").userPhone).then(res=>{
        //已经完成的订单
        orderList_pay.splice(0,orderList_pay.length)
        orderList_pay.push(...res.data.data.filter(order => order.orderState === 1))

        //未完成的订单
        ordersList_unpay.splice(0,ordersList_unpay.length)
        ordersList_unpay.push(...res.data.data.filter(order => order.orderState === 0))
    })
})

</script>

<style scoped>
h3{
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
    margin-bottom: 0;
}
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}


</style>